<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
</head>

<style>
    #myCanvas {
        margin: 100px auto;
        display: block;
    }

    body {
        background-color: yellowgreen;
    }
</style>

<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
</body>


<script>
    var myCanvas = document.getElementById("myCanvas");
    var ctx = myCanvas.getContext("2d");
    var pi = Math.PI;

    function draw() {
        ctx.clearRect(0, 0, 400, 400);

        ctx.save();
        ctx.translate(200, 200);

        ctx.beginPath();
        ctx.arc(0, 0, 30, 0, 2 * pi);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
        ctx.font = "10px";
        ctx.fillStyle = "#fff";
        ctx.textAlign = "center";
        ctx.fillText("太阳", 0, 0);

        ctx.beginPath();
        ctx.arc(0, 0, 100, 0, 2 * pi);
        ctx.strokeStyle = "#fff";
        ctx.stroke();
        ctx.closePath();



        let time = new Date();
        //绘制地球                       10/60                                                1/60
        ctx.rotate(2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds());
        ctx.translate(100, 0);
        ctx.beginPath();
        ctx.arc(0, 0, 20, 0, 2 * pi);
        ctx.fillStyle = "green";
        ctx.fill();
        ctx.font = "10px";
        ctx.fillStyle = "#fff";
        ctx.textAlign = "center";
        ctx.fillText("地球", 0, 0);



        ctx.beginPath();
        ctx.arc(0, 0, 50, 0, 2 * pi);
        ctx.strokeStyle = "#fff";
        ctx.stroke();
        ctx.closePath();


        //绘制月球
        ctx.rotate(2 * Math.PI / 6 * time.getSeconds() + 2 * Math.PI / 6000 * time.getMilliseconds());
        ctx.translate(50, 0);
        ctx.beginPath();
        ctx.arc(0, 0, 10, 0, 2 * pi);
        ctx.fillStyle = "#ddd";
        ctx.fill();
        ctx.font = "8px";
        ctx.fillStyle = "#fff";
        ctx.textAlign = "center";
        ctx.fillText("月球", 0, 0);
        ctx.restore();

        requestAnimationFrame(draw);
    }

    draw();


</script>

</html>